<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/商品详情.css"/>
	</head>
	<body>
		<div class="app">
			<div class="header">
				<span>商品详情</span>
			</div>
			<div class="banner">
				<div class="swiper">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/矩形%201.png" ></div>
				        <div class="swiper-slide"><img src="img/矩形%201.png" ></div>
				        <div class="swiper-slide"><img src="img/矩形%201.png" ></div>
						<div class="swiper-slide"><img src="img/矩形%201.png" ></div>
				    </div>
				    <div class="swiper-pagination"></div>
				</div>
				<div class="content">
					<div class="txt">
						<div class="cuxiao">促销</div>
						<div class="tit">莫次有机PWE活性美白洗面奶</div>
					</div>
					<div class="money">
						<div class="left">
							<span class="xianjia">
								￥169
							</span>
							<span class="yuanjia">
								￥220
							</span>
						</div>
						<div class="right">
							<span class="baoyou">
								买够200元包邮
							</span>
						</div>
					</div>
					<div class="guige">
						<div class="left">
							规格
						</div>
						<div class="right">
							<span class="biaozhun">标准</span>
							<img src="img/PathR.png" >
						</div>
					</div>
				</div>
			</div>
			<div class="main">
				<ul class="lis">
					<li>
						详情
					</li>
					<li>
						评价
					</li>
					<li>
						售后
					</li>
				</ul>
				<div class="xiangqing">
					<div class="content">
						<div class="left">
							<div class="icon">
								<img src="img/奈瑞儿.png" >
							</div>
							<div class="txt">
								<div class="tit">
									莫次有机PWE活性美白洗面奶
								</div>
								<div>
									<span class="change">产品亮点：</span>含有蚕丝胶原蛋白、水解蚕丝，温和细滑。
								</div>
								<div>
									<span class="change">使用效果：</span>洗后肌肤滋润柔滑。
								</div>
								<div>
									<span class="change">使用部位：</span>面部
								</div>
							</div>
						</div>
						<div class="right">
							<img src="img/spa1.png" >
						</div>
					</div>
					<div class="pic">
						<img src="img/spa2.png" >
						<img src="img/spa3.png" >
						<img src="img/spa4.png" >
						<img src="img/spa5.png" >
					</div>
				</div>
			</div>
			<div class="trolley">
				<img src="img/购物车2.svg" >
			</div>
			<div class="footer">
				<ul class="lis">
					<li>
						<div class="zuhe">
							<div class="pic">
								<img src="img/客服.png" alt="">
							</div>
							<div class="txt">
								客服
							</div>
						</div>
						<div class="zuhe">
							<div class="pic">
								<img src="img/收藏.png" >
							</div>
							<div class="txt">
								收藏
							</div>
						</div>
					</li>
					<li>
						加入购物车
					</li>
					<li>
						立即购买
					</li>
				</ul>
			</div>
		</div>
		<script>
			var mySwiper = new Swiper ('.swiper', {
				loop: true, 
				pagination: {
					el: '.swiper-pagination',
				}
			})
		</script>
	</body>
</html>
